<template>
   <div class="index">
      <!-- 搜索栏 -->
      <header>
         <!--      定位部分   -->
         <div class="index_location" @click="jump('location')">
            <img src="../../assets/img/dingwei_1.png" alt="" class="dingwei_1">
            <div class="index_location_text">{{location}}</div>
            <img src="../../assets/img/index_xiajiantou.png" alt="" class="index_xiajiantou">
         </div>
         <!--      搜索部分    -->
         <div class="index_search" @click="search">
            <img src="../../assets/img/index_fangdajing.png" alt="">
            <span>请输入搜索商品名称</span>
         </div>
      </header>
      <!--    轮播图  -->
      <div class="index_lunbo">
         <div class="swiper-container" style="width: 100%;height:1.42rem;">
            <div class="swiper-wrapper" style="width: 100%;height:100%">
               <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="$store.state.imgurlApi+el.image">
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
         </div>
      </div>
      <!--   首页分类功能部分 -->
      <div class="index_small_gn">
         <div class="index_small_gn_box" v-for="x in FunList" @click="jump(x.page)">
            <img :src="x.url" alt="">
            <div>{{x.text}}</div>
         </div>
      </div>
      <!--   首页轮播下面的广告图 -->
      <div class="index_banner_1">
         <div class="swiper-container2" style="width: 100%;height:.83rem;">
            <div class="swiper-wrapper" style="width: 100%;height:100%">
               <div class="banner_2item swiper-slide" v-for="(x,y) in informationList">
                  <div class="banner_2item_top">
                     {{x.msg}}<span>最新消息</span>
                  </div>
                  <div class="banner_2item_bot">
                     <p></p>
                     <p>最热门的热点新闻都<span>在这里</span></p>
                     <p></p>
                  </div>
                  <img :src="x.url" alt="" class="index_lunbo2_img">
               </div>
            </div>
         </div>
      </div>
      <!--   首页-拼团优惠部分 -->
      <div class="index_assemble">
         <!--    Title标题  -->
         <div class="index_assemble_title" @click="jump('assemble')">
            <div class="index_assemble_title_left">
               <div>{{pintuanTitle.title}}</div>
               <img :src="pintuanTitle.url" alt="">
            </div>
            <div class="index_assemble_title_right">
               更多
               <img src="../../../static/img/youjiantou.png" alt="">
            </div>
         </div>
         <!--    拼团优惠商品  -->
         <div class="index_assemble_box">
            <div class="index_assemble_box_item" v-for="(x,index) in pintuanBox" @click="jump('groupDetails',x.id)" v-if="index<3">
               <img :src="x.image" alt="">
               <div class="index_assemble_box_item_name">{{x.title}}</div>
               <div class="index_assemble_box_item_money">￥{{x.price}}</div>
            </div>
         </div>
      </div>

      <!--   首页-限时秒杀部分 -->
      <div class="index_assemble">
         <!--    Title标题  -->
         <div class="index_assemble_title index_miaosha_title" @click="jump('panicBuy')">
            <div class="index_assemble_title_left">
               <div>{{miaoshaTitle.title}}</div>
               <img :src="miaoshaTitle.url" alt="">
            </div>
            <div class="index_assemble_title_right">
               更多
               <img src="../../../static/img/youjiantou.png" alt="">
            </div>
         </div>
         <!--   秒杀倒计时   -->
         <div class="miaoshaTime">
            <div class="miaoshaTime_title">距本场开始</div>
            <div class="miaoshaTime_number"><p>00</p>:<p>00</p>:<p>00</p></div>
         </div>
         <!--    拼团优惠商品  -->
         <div class="index_assemble_box">
            <div class="index_assemble_box_item index_miaosha_box_item" v-for="x in miaoshaBox" @click="jump('panicDetails')">
               <img :src="x.url" alt="">
               <div class="index_assemble_box_item_name">{{x.name}}</div>
               <div class="index_assemble_box_item_money">￥{{x.money}}.00</div>
            </div>
         </div>
      </div>

      <h1 class="index_tuijianTitle">— 为您推荐更多 —</h1>
      <!--   为您推荐商品部分 -->
      <div class="index_recommendWrap">
         <recommend class="index_recommendBox" v-for="(x,y) in recommendList" :data="x" :key="y"></recommend>
      </div>

      <!--<div class="amap-page-container">-->
      <!--   <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">-->
      <!--   </el-amap>-->

      <!--   <div class="toolbar">-->
      <!--  <span v-if="loaded">-->
      <!--    location: lng = {{ lng }} lat = {{ lat }}-->
      <!--  </span>-->
      <!--      <span v-else>正在定位</span>-->
      <!--   </div>-->
      <!--</div>-->
   </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/css/swiper.css';
    import recommend from '../../components/ClientComponents/assembly/recommend';

    export default {
        name: "index",
        components: {
            recommend
        },
        data() {
            let self = this;
            return {
                location: '西窑坊小区', // 头部定位显示
                lunbolist: [], // 轮播图
                FunList: [{text: '外卖', url: '../../static/img/index_waimai.png', page: 'outFood'}, {
                    text: '休闲娱乐',
                    url: '../../static/img/index_xiuxian.png',
                    page: 'arder'
                }, {text: '美食', url: '../../static/img/index_meishi.png', page: 'deliciousFood'},
                    {text: '生活圈', url: '../../static/img/index_shenghuo.png', page: 'life'}, {
                        text: '积分商城',
                        url: '../../static/img/index_jifen.png',
                        page: 'integral'
                    }, {
                        text: '校园资讯',
                        url: '../../static/img/xiaoyuanzixun001.png',
                        page: 'CampusInformation'
                    }, {
                        text: '二手市场',
                        url: '../../static/img/ershoushichang001.png',
                        page: 'secondHandMarket'
                    }, {text: '兼职', url: '../../static/img/jianzhi001.png', page: 'partTimeJob'},
                    {text: '充值', url: '../../static/img/chongzhi001.png', page: 'no'}, {
                        text: '社团活动',
                        url: '../../static/img/shetuan001.png',
                        page: 'no'
                    }], // 首页分类功能的数据
                indexBanner: '../static/img/index_banner_1.png', // 首页小功能下面的广告图
                pintuanTitle: {title: '拼团优惠', url: '../../static/img/pintuanbaopin.png'}, // 首页拼团标题数据
                pintuanBox: [], // 首页秒杀商品数据
                miaoshaTitle: {title: '限时秒杀', url: '../../static/img/gengduobaopin.png'}, // 首页秒杀标题数据
                miaoshaBox: [{name: '印度芒果爆珠', url: '../../static/img/miaosha_1.png', money: '8'}, {
                  name: '印度芒果爆珠',
                  url: '../../static/img/miaosha_1.png',
                  money: '8'
                }], // 首页秒杀商品数据
                miaoshaTime: [], // 秒杀时间
                recommendList: [],
            // 轮播图二
                informationList:[
                    {msg:'新冠肺炎疫情',url:'../../../static/img/indexlbbj001.png'},
                    {msg:'我爱中国',url:'../../../static/img/indexlbbj001.png'},
                    {msg:'今天天气不好',url:'../../../static/img/indexlbbj001.png'}
                ],
                center: [121.59996, 31.197646],
                lng: 0,
                lat: 0,
                loaded: false,
                plugin: [{
                    pName: 'Geolocation',
                    events: {
                        init(o) {
                            // o 是高德地图定位插件实例
                            o.getCurrentPosition((status, result) => {
                                if (result && result.position) {
                                    self.lng = result.position.lng;
                                    self.lat = result.position.lat;
                                    self.center = [self.lng, self.lat];
                                    self.loaded = true;
                                    self.$nextTick();
                                }
                            });
                        }
                    }
                }]
            }
        },
        created() {
            this.$myAxios('api/goods/goods_list', 'get', {
                offset:0
            }).then(res => {
                console.log(res);
                this.recommendList = res.data.data.list;
            });
            // //banner图列表
            this.$myAxios('index/index/banner', 'post').then(res => {
              this.lunbolist = res.data.banner;
                this.$nextTick(() => {
                    this.initSwiper()
                })
            });
          // 拼团列表
          this.$myAxios('addons/shopro/goods/grouponList', 'post').then(res => {
            if(res.data.code == 1){
              this.pintuanBox = res.data.data.data;
              console.log(this.pintuanBox)
            }else{
              this.$myNotice(res.data.msg,2000);
            }
          });
        },
        mounted() {

        },
        methods: {
            initSwiper () {
                //    这里配置swiper轮播图
                new Swiper('.swiper-container', {
                    observer:true,
                    observeParents: true,
                    circular:true,
                    loop: true, // 循环模式选项
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    autoplay:{
                        delay:3000,
                        disableOnInteraction: false
                    }
                });
                new Swiper('.swiper-container2', {
                    observer:true,
                    observeParents: true,
                    circular:true,
                    loop: true, // 循环模式选项
                    autoplay:{
                        delay: 2000,
                        disableOnInteraction: false
                    }
                });
            },
            jump(page,id) {
                if (page == 'no') {
                    this.$myNotice('该地区暂未开放!',1500)
                }else {
                    this.$router.push({
                        name: page,
                        query:{id:id}
                    })
                }
            },
            search(){
                this.$router.push({
                    name:'search',
                    query:{
                        type:0
                    }
                })
            }
        }
    }
</script>

<style scoped>
   .index {
      padding: .5rem .1rem .7rem .1rem;
      background-color: #F7F5F6;
   }

   /* 头部搜索栏部分 */
   .index header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: .5rem;
      background: linear-gradient(90deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-sizing: border-box;
      padding: .09rem .17rem;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-content: center;
   }

   .index_location {
      width: 1.21rem;
      height: 100%;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding-right: .06rem;
   }

   .index_search {
      width: 2.37rem;
      height: 100%;
      box-sizing: border-box;
      padding: .08rem .36rem;
      background-color: #FFFFFF;
      border-radius: .16rem;
      font-size: .12rem;
      color: #D1D1D1;
      position: relative;
   }

   .index_location .dingwei_1 {
      width: .16rem;
      height: .21rem;
   }

   .index_location .index_xiajiantou {
      width: .11rem;
      height: .08rem;
   }

   .index_location > .index_location_text {
      height: .15rem;
      font-size: .13rem;
      color: #FEFEFE;
      width: .70rem;
      line-height: .15rem;
      text-align: right;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

   .index_search img {
      width: .16rem;
      height: .16rem;
      position: absolute;
      top: .08rem;
      left: .12rem;
   }

   /* 轮播图部分 */
   .index_lunbo {
      width: 100%;
      box-sizing: border-box;
      padding: .1rem 0;
   }

   .index_swiper_listimg {
      width: 100%;
      height: 100%;
   }

   /* 轮播图小圆点颜色改变 */
   .swiper-pagination-bullets .swiper-pagination-bullet-active {
      background: rgba(252, 216, 144, .68) !important;
   }

   /* 首页小功能部分 */
   .index_small_gn {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-flow: row wrap;
      margin-bottom: .1rem;
   }

   .index_small_gn_box {
      width: .7rem;
      height: .75rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .1rem;
   }

   .index_small_gn_box img {
      width: .51rem;
      height: .51rem;
   }

   .index_small_gn_box div {
      font-size: .12rem;
      color: #333333;
      width: 100%;
      text-align: center;
   }

   /* 首页轮播图下面的广告图 */
   .index_banner_1 {
      width: 100%;
      height: 1rem;
   }


   /* 首页拼团优惠部分 */
   .index_assemble {
      padding: .125rem;
      background-color: #ffffff;
      border-radius: 5px;
      margin-bottom: .1rem;
   }

   .index_assemble_title {
      width: 100%;
      height: .20rem;
      margin-bottom: .12rem;
      display: flex;
      justify-content: space-between;
   }

   .index_assemble_title_left {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
   }

   .index_assemble_title_left div {
      height: 100%;
      font-size: .16rem;
      line-height: .20rem;
      color: #333333;
      font-weight: bold;
   }

   .index_assemble_title_left img {
      width: .7rem;
      height: .17rem;
      margin-left: .07rem;
   }

   .index_assemble_title_right {
      width: 50%;
      position: relative;
      text-align: right;
      padding-right: .1rem;
      font-size: .12rem;
      line-height: .20rem;
      color: #B5B5B5;
   }

   .index_assemble_title_right img {
      position: absolute;
      right: 0;
      top: .05rem;
      width: .1rem;
      height: .1rem;
   }

   /* 拼团商品列表 */
   .index_assemble_box {
      width: 100%;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
   }

   .index_assemble_box_item {
      width: 1.04rem;
      font-size: 0;
   }

   .index_assemble_box_item img {
      width: 100%;
      height: .79rem;
   }

   .index_assemble_box_item_name {
      font-size: .11rem;
      color: #333333;
      margin: .05rem 0;
      width: 100%;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

   .index_assemble_box_item_money {
      width: 100%;
      text-align: center;
      font-size: .13rem;
      color: #FF0000;
      font-weight: bold;
   }

   /* 秒杀部分 */
   /* 秒杀时间 */
   .miaoshaTime {
      width: 100%;
      display: flex;
      flex-flow: row;
      justify-content: flex-start;
      align-items: center;
      height: .14rem;
      color: #FF3E3E;
      margin-bottom: .09rem;
   }

   .miaoshaTime_title {
      font-size: .13rem;
      line-height: .14rem;
      color: #FF3E3E;
      font-weight: bold;
   }

   .miaoshaTime_number {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .miaoshaTime_number p {
      display: inline-block;
      width: .14rem;
      height: .14rem;
      font-size: .09rem;
      text-align: center;
      line-height: .14rem;
      margin: 0 .03rem;
      background-color: #FC5555;
      color: #FEFEFE;
      border-radius: .02rem;
   }

   .index_miaosha_title {
      margin-bottom: .07rem;
   }

   .index_miaosha_box_item {
      width: 1.62rem;
   }

   .index_miaosha_box_item img {
      width: 100%;
      height: 1.07rem;
   }

   /* 为您推荐部分 */
   .index_tuijianTitle {
      width: 100%;
      margin: .17rem 0;
      text-align: center;
      font-weight: bold;
      font-size: .18rem;
      color: #333333;
   }

   /* 为您推荐商品部分 */
   .index_recommendWrap {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
   }


   /* 轮播图小圆点颜色改变 */
   >>> .swiper-pagination-bullets .swiper-pagination-bullet-active {
      background: rgba(252, 216, 144, .68) !important;
   }


/*  轮播广告2 */

   .swiper-pagination2 {
      text-align: center;
   }
   .index_banner_1 {
      overflow: hidden;
   }
   .banner_2item {
      width: 3.4rem;
      height: .83rem;
      box-sizing: border-box;
      padding: .15rem 0;
      max-height: .83rem;
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
   }
   .index_lunbo2_img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
   }

   /*引入本地字体*/
   @font-face {
      font-family: zihun;
      src: url("../../../static/font/zihun.ttf");
   }
   .banner_2item_top {
      position: relative;
      z-index: 1;
      font-family: zihun;
      font-size: .21rem;
      letter-spacing: .03rem;
      font-weight: bold;
      color: #FFFFFF;
      width: 100%;
      text-align: center;
   }
   .banner_2item_top>span {
      color:#F9F119;
   }

   .banner_2item_bot {
      position: relative;
      z-index: 1;
      text-align: center;
      margin: .1rem auto;
      height: .2rem;
      padding: 0 .1rem;
      line-height: .2rem;
      box-sizing: border-box;
      border: .01rem solid #FFFFFF;
      font-family: zihun;
      color: #FFFFFF;
   }
   .banner_2item_bot>p:nth-child(1) {
      width: .1rem;
      height: .01rem;
      background-color: #FFFFFF;
      position: absolute;
      top: 50%;
      left: -.1rem;
   }
   .banner_2item_bot>p:nth-child(3) {
      width: .1rem;
      height: .01rem;
      background-color: #FFFFFF;
      position: absolute;
      top: 50%;
      right: -.1rem;
      font-size: .12rem;
   }
</style>
